<template>
	<view>
		<!-- {{JSON.stringify(userInfo)}}<br> -->
		<view class="regist-header">
			<p style="font-size: 50rpx;">Hello,</p>
			<p style="font-size: 40rpx;">{{userInfo.nickname}}</p>
			<p style="font-size: 30rpx;">欢迎注册友善小店会员～</p>
		</view>
		<tui-input v-model="cardInfo.realName"
		label="姓名"
		placeholder="请输入姓名～"></tui-input>
		
		<tui-input v-model="cardInfo.idcard"
		label="身份证"
		placeholder="请输入身份证～"></tui-input>
		
		<tui-input v-model="cardInfo.birth"
		label="生日"
		placeholder="请选择生日～"
		disabled
		@click="showTime()"
		></tui-input>
		
		<view class="tui-title thorui-cells">性别</view>
		<radio-group name="radio" @change="sexChange">
			<view class="thorui-cells thorui-white__bg thorui-align__center">
				<view class="thorui-align__center">
					<radio color="#5677fc" value="男" checked></radio>
					<text class="tui-text">男</text>
				</view>
				<view class="thorui-align__center" style="margin-left: 40rpx;">
					<radio color="#5677fc" value="女"></radio>
					<text class="tui-text">女</text>
				</view>
			</view>
		</radio-group>
		<tui-button 
		  margin="20rpx 0 30rpx 0" :size="34" bold
		  :loading="loading"
		   @click="registVip()">注册</tui-button>
		
		
		<view>
			<tui-datetime ref="dateTime" :type="2"  :cancelColor="'#888'" :color="'#5677fc'"
			@confirm="confirmDate"></tui-datetime>
		</view>
		
		<!--顶部消息-->
		<tui-tips ref="toast" :backgroundColor="backgroundColor"></tui-tips>
		
	</view>
</template>

<script>
	const formValid = require("@/components/common/tui-validation/tui-validation.js");
	export default {
		data(){
			return {
				userInfo: {},
				cardInfo: {
				  memberId: '',
				  realName: '',
				  idcard: '',
				  sex: '男',
				  birth: ''
				},
				loading: false,
				rules: [{
					name: "memberId",
					rule: ["required"],
					msg: ["用户id失效"]
				},{
					name: "realName",
					rule: ["required", "isChinese"],
					msg: ["请输入姓名", "请输入中文"]
				},{
					name: "idcard",
					rule: ["required", "isIdCard"],
					msg: ["请输入身份证", "请输入正确身份证"]
				},{
					name: "sex",
					rule: ["required"],
					msg: ["请输入性别"]
				},{
					name: "birth",
					rule: ["required"],
					msg: ["请输入生日"]
				}],
				toast: false,
				backgroundColor: '#ff7900'
			}
		},
		created(){
			this.userInfo = uni.getStorageSync("user_info");
			this.cardInfo.memberId = this.userInfo.id;
		},
		methods:{
			sexChange(e){
				this.cardInfo.sex = e.detail.value
			},
			showTime(){
				this.$refs.dateTime.show();
			},
			confirmDate(e){
				this.cardInfo.birth = e.result;
			},
			registVip(){
				
				let _this = this;
				_this.loading = true;
				
				let checkRes = formValid.validation(this.cardInfo, this.rules);
				if (!checkRes) {
					_this.$api.addVipCard(this.cardInfo).then(res => {
						_this.backgroundColor = '#19be6b';
						// let options = {
						// 	msg: res.result,
						// 	duration: 2000
						// };
						// _this.$refs.toast.showTips(options);
						_this.loading = false;
						uni.navigateTo({
							url:"/pages/comp/msg-scene?title=注册成功&desc=恭喜您注册成功"
						});
					})
					
					
					
				} else {
					_this.backgroundColor = '#ff7900';
					let options = {
						msg: checkRes,
						duration: 2000
					};
					_this.$refs.toast.showTips(options);
					_this.loading = false;
				}
			}
		}
	}
</script>

<style lang="scss">
	@import './card.css';
	
	.tui-title {
		width: 100%;
		font-size: 28rpx;
		color: #888;
		padding: 40rpx 30rpx 20rpx;
		box-sizing: border-box;
	}
	
	.tui-text {
		font-size: 30rpx;
		padding-left: 12rpx;
	}
	
	.regist-header {
		width: 100%;
		background-color: #A4B8AD;
		padding: 20rpx 0 60rpx 30rpx;
		color: #FFFFF0;
	}
	
</style>
